<template>
  <div :class="{'medium-table-footer': !showMobilePage}">
    <MoreOpeator
      :list="[
        {label: '发起询单', auth: hasRouteAuth('crm:flyNotice:create'), handelClick: () => quicklyCreate('询单', 'flyNoticeCreate')},
        {label: '发起询价', auth: hasRouteAuth('crm:flyPrice:create'), handelClick: () => quicklyCreate('询价', 'flyPriceCreate')},
        {label: '设置签约', handelClick: ()=> {signDialogOpen()}, auth: hasRouteAuth('medium:resource:signSet'), divided: true},
        {label: '开启采集', handelClick: ()=> {toOpenPick(true)}, auth: hasRouteAuth('medium:resource:batchPick'), divided: true},
        {label: '取消采集', handelClick: ()=> {toOpenPick(false)}, auth: hasRouteAuth('medium:resource:batchPick')},
        {label: '批量删除', handelClick: tobatchDelOrder, auth: hasRouteAuth('medium:resource:batchDelete'), divided: true},
        {label: '批量有效', handelClick: () => {toBatchResourceStatus(1)}, auth: hasRouteAuth('medium:resource:valid')},
        {label: '批量失效', handelClick: () => {toBatchResourceStatus(0)}, auth: hasRouteAuth('medium:resource:invalid')},
        {label: '合并资源', handelClick: toMerge, auth: hasRouteAuth('medium:operator:merge') && canMerge, divided: true},
        {label: '合并资源(推荐)', handelClick: mergeShow, auth: hasRouteAuth('medium:operator:merge')}
      ]"
      :show-mobile-icon="showMobilePage"
      label="批量操作"
      mobile-text="批量"
    />
    <template v-if="!showMobilePage">
      <div class="medium-table-footer-tools">
        <SelectionNum :select-item="selectItem" style="margin-left:10px;" @clearMixinSelection="clearMixinSelection" />
      </div>
      <el-pagination
        v-if="resourceData && resourceData.data && resourceData.data.total > 0"
        :current-page="resourceData.data.page "
        :page-size="resourceData.data.perPage"
        :total="resourceData.data.total"
        :page-sizes="[20, 50, 100, 250, 500]"
        small
        layout="total, prev, pager, next,sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <div v-if="filterOpen" class="empty-class"/>
    </template>
  </div>
</template>

<script>
import ElMessage from '@/utils/message';
// api
import { batchDelMedium } from '@/api/medium';
import { setResourceStatus, autoPick } from '@/api/resource';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
import { showModal } from '@/utils/message';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
export default {
  components: { MoreOpeator },
  props: {
    selectParams: {
      type: String,
      default: 'single'
    },
    selectItem: {
      type: Array,
      default: () => {
        return [];
      }
    },
    resourceData: {
      type: Object,
      default: null
    },
    canMerge: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectMaskShow: false,
      selectParamOptions: [
        { label: '全部内容', value: 'all' },
        { label: '当页全部', value: 'pageAll' },
        { label: '当页选中', value: 'single' }
      ]
    };
  },
  computed: {
    ...mapState({
      'filterOpen': state => state.medium.filterOpen,
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  destroyed() {
    document.removeEventListener('click', this.hidePanel);
  },
  methods: {
    hasRouteAuth,
    toMerge() { // 批量合并
      this.$emit('toMerge');
    },
    // 选中相关
    hidePanel(event) {
      const dom = document.getElementById('selectMask');
      if (dom && this.selectMaskShow) {
        if (!dom.contains(event.target)) {
          this.selectMaskShow = false;
        }
      }
    },
    clearMixinSelection() {
      this.$emit('clearMixinSelection');
    },
    toSelectMaskShow() {
      this.selectMaskShow = !this.selectMaskShow;
    },
    handleSizeChange(page) {
      this.$emit('handleSizeChange', page);
      // this.toSelected('single');
    },
    handleCurrentChange(size) {
      this.$emit('handleCurrentChange', size);
      // this.toSelected('single');
    },
    // 批量有效或无效 status 为0 设置为无效 为1的话设置为有效
    toBatchResourceStatus(status = 0) {
      const tip = status ? '有效' : '失效';
      if (this.selectItem.length === 0) {
        ElMessage.warning(`请选择要设置为${tip}的账号资源`);
        return;
      }
      showModal(`是否确定设置为${tip}？`, '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon',
        center: true,
        type: 'warning'
      }).then(() => {
        const ids = this.selectItem.map(i => i.mediumId).join(',');
        const params = {
          ids,
          status
        };
        setResourceStatus(params).then(res => {
          if (res.code === 200) {
            this.$message.success('设置成功');
            this.$emit('getMediumData', false);
            this.$emit('clearMixinSelection');
          }
        }).catch(err => {
          console.error(err);
        });
      });
    },
    // 删除
    tobatchDelOrder() {
      if (this.selectItem.length === 0) {
        ElMessage.warning('请选择要删除的账号资源');
        return;
      }
      showModal('是否确定删除？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon',
        center: true,
        type: 'warning'
      }).then(() => {
        const pageLength = (this.resourceData && this.resourceData.data) ? this.resourceData.data.items.length : 0;
        const deleteLength = this.selectItem.length;
        const hasPage = pageLength - deleteLength; // 删掉后单页还剩多少条
        const ids = this.selectItem.map(i => i.mediumId).join(',');
        const params = {
          ids
        };
        batchDelMedium(params).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.$emit('getMediumData', hasPage <= 0);
            this.$emit('clearMixinSelection');
          }
        }).catch(err => {
          console.error(err);
        });
      });
    },
    toOpenPick(autoPickType) {
      if (this.selectItem.length === 0) {
        ElMessage.warning('请选择要操作的账号资源');
        return;
      }
      showModal(`是否确定${autoPickType ? '开启采集' : '取消采集'}？`, '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon',
        center: true,
        type: 'warning'
      }).then(() => {
        const ids = this.selectItem.map(i => i.mediumId).join(',');
        const params = {
          id: ids,
          autoPick: autoPickType
        };
        autoPick(params).then(res => {
          if (res.code === 200) {
            this.$message.success('设置成功');
            this.$emit('getMediumData', false);
            this.$emit('clearMixinSelection');
          }
        }).catch(err => {
          console.error(err);
        });
      });
    },
    quicklyCreate(label, name) {
      this.$emit('quicklyCreate', label, name);
    },
    mergeShow() {
      this.$emit('mergeShow');
    },
    signDialogOpen() {
      this.$emit('signDialogOpen');
    }
  }
};
</script>

<style lang="scss" scoped>
.medium-table-footer {
  display: flex;
  align-items: center;
  width: 100%;
  .medium-table-footer-tools {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
}
.select-params {
  position: relative;
  .select-params-active {
    // width: 106px;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #e5e5e5;
    cursor: pointer;
    &::after {
      content: '';
      height: 8px;
      margin-left: 3px;
      display: inline-block;
      width: 0;
      height: 0;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
      border-bottom: 5px solid #999999;
      transform: rotateZ(180deg);
      transition: all 0.5ms;
    }
    &.active::after{
      transform: rotateZ(0);
    }
  }
  .select-params-mask{
    position: absolute;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0px 0px 6.4px 1.6px
      rgba(218, 218, 218, 0.49);
    border: none;
    width: 106px;
    bottom: 35px;
    left: -30px;
    z-index: 2019;
    .select-params-mask-item {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      color: #333333;
      font-size: 12px;
      border-bottom: 1px solid #eeeeee;
      cursor: pointer;
      position: relative;
      &:last-child {
        border-bottom: none;
      }
      &.selected {
        color: #333333;
        font-weight: normal;
        &:after {
          position: absolute;
          right: 15px;
          top: 7px;
          content: "";
          width: 7px;
          height: 11px;
          border-color: #406EFF;
          border-style: solid;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
          font-size: 12px;
        }
      }
    }
  }
}
.empty-class {
  width: 389px;
}
</style>
